<template>
	<view class="cont_box">
		<view class="header">
			<view class="header_title">
				当前可用积分
			</view>
			<view class="">
				<span class="comsume">{{userInfo.pointsNum}}</span>
				<span class="comsume_desc">积分</span>
			</view>
		</view>
		<view class="set">
			<view class="setitem" @click="timeshow=true">
				<span class="iconfont icon-rili"></span>
				{{timevalue?formtime(timevalue):'全部时间'}}
				<span class="iconfont " :class="timeshow?'icon-shangjiantou':'icon-shanglajiantou'"></span>
			</view>
			<view class="setitem" @click="show=true">
				<span class="iconfont icon-shilileixing"></span>
				{{typevalue?typevalue:'全部类型'}}
				<span class="iconfont " :class="show?'icon-shangjiantou':'icon-shanglajiantou'"></span>
			</view>
		</view>
		<view class=" ">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y scroll_list" @scrolltolower="lower"
				:style="{ height: 'calc(100vh - 242px)' }">
				<view class="list_item" v-for="(item,index) in datalist" :key="index">
					<view class="item_time" v-if="item.type">
						{{item.mathtime}}
					</view>
					<view class="item" v-else>
						<view class="item_left">
							<view class="">
								<span class="iconfont icon-chongzhi" v-if="item.pointsType==1"></span>
								<span class="iconfont icon-shipinxiazai" v-else></span>
							</view>
							<view class="">
								<view class="record">
									{{item.pointsType==1?'积分充值':'视频下载'}}
								</view>
								<view class="_time">
									{{item.insertTime}}
								</view>
							</view>
						</view>
						<view class="price">
							<span class="price_add" v-if="item.pointsType==1">+{{item.pointsNum}}</span>
							<span class="price_subtract" v-else>-{{item.pointsNum}}</span>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="notice_item">
			<view class="notice">
				充值须知
			</view>
			<view class="notice_desc">
				积分充值后永久有效，可用于所有付费服务
			</view>
			<view class="notice_desc">
				充值成功后积分将立即到账，可在“我的积分”中查看
			</view>
		</view>
		<u-datetime-picker :show="timeshow" v-model="monthvalue" mode="year-month" closeOnClickOverlay
			@confirm="confirmtime" @cancel="timeshow=false" @close="timeshow=false"></u-datetime-picker>
		<u-picker :show="show" :columns="columns" closeOnClickOverlay @cancel="show=false" @close="show=false"
			@confirm="confirm"> </u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typevalue:'',//用户所选时间
				timevalue: '',//用户所选类型
				monthvalue: Number(new Date()),
				timeshow: false,//选择时间弹窗
				show: false,//选择类型弹窗
				userInfo: {},//用户信息
				datalist: [],//消费记录列表
				columns: [
					['积分充值', '视频下载']
				],
				query: {
					pageNum: 1,
					pageSize: 10,
					pointsType: 1, // 充值  2下载消费 
					startTime: "" //格式 yyyy-MM
				}
			};
		},
		components: {},
		onload() {

		},
		created() {
			this.detailinfo()
			this.recordListByPagefn()
		},
		mounted() {

		},
		watch: {

		},
		methods: {
			confirmtime(e) {
				this.timevalue = e.value
				const currentDates = new Date(e.value);
				const currentMonths = (currentDates.getMonth() + 1).toString().padStart(2, '0'); // 补零，确保两位
				const currentYears = currentDates.getFullYear();
				this.query.startTime = currentYears + '-' + currentMonths
				this.datalist = []
				this.query.pageNum = 1
				this.recordListByPagefn()
				this.timeshow = false
			},
			confirm(e) {
				this.query.pointsType = e.indexs[0] + 1
				this.typevalue = e.value[0]
				this.datalist = []
				this.query.pageNum = 1
				this.recordListByPagefn()
				this.show = false
			},
			detailinfo() {
				this.$request(`/mine/memberInfo`, 'get').then(
					res => {
						this.userInfo = res.data.data
					})
			},
			formtime(e) {
				const currentDates = new Date(e);
				const currentMonths = (currentDates.getMonth() + 1).toString().padStart(2, '0'); // 补零，确保两位
				const currentYears = currentDates.getFullYear();
				return currentYears + '年' + currentMonths + '月'
			},
			lower() {
				this.query.pageNum++
				this.recordListByPagefn()
			},
			recordListByPagefn() {
				this.$request(`/points/recordListByPage`, 'post', this.query).then(
					res => {
						let arr = []
						arr = this.datalist.concat(res.data.data.records)
						// 处理数据并插入月份标识
						let result = [];
						let lastMonth = null;
						let lastYear = null;

						arr.forEach((item) => {
							if (item.type) {
								const currentDates = new Date(item.mathtime);
								const currentMonths = currentDates.getMonth(); // 获取月份（0: 1月, 11: 12月）
								const currentYears = currentDates.getFullYear(); // 获取年份
								lastYear = currentYears
								lastMonth = currentMonths
								return
							}//如果遇见已经插入的标识符就跳过
							const currentDate = new Date(item.insertTime);
							const currentYear = currentDate.getFullYear(); // 获取年份
							const currentMonth = currentDate.getMonth(); // 获取月份（0: 1月, 11: 12月）
							const monthKey = `${currentYear}-${currentMonth + 1}`; // 生成 "2025-10" 作为月份标识
							if (lastYear === null || (lastYear !== currentYear || lastMonth !==
									currentMonth)) {
								const monthLabel = {
									mathtime: `${currentYear}年${currentMonth + 1}月`, // 动态生成年份和月份
									type: true
								};
								result.push(monthLabel); // 插入到结果中
							}

							// 插入当前数据
							result.push(item);

							// 更新 lastYear 和 lastMonth
							lastYear = currentYear;
							lastMonth = currentMonth;
						});
						// console.log(result);
						this.datalist = result
					})
			}
		}
	};
</script>

<style scoped lang="scss">
	.header {
		padding: 20px;
		height: 70px;
		background-color: #f66e14;
		color: #fff;

		.header_title {
			margin-bottom: 10px;
			font-size: 28rpx;
		}

		.comsume {
			font-size: 50rpx;
			font-weight: 600;
		}

		.comsume_desc {
			margin-left: 3px;
			font-size: 26rpx;
		}
	}

	.set {
		display: flex;
		padding: 15px 20px;
		justify-content: space-between;
		font-weight: 600;
		font-size: 28rpx;

		.icon-rili,
		.icon-shilileixing {
			margin-right: 5px;
		}

		.iconfont {
			font-weight: 500;
		}
	}

	.notice_item {
		padding: 0 20px;
		height: 72px;
	}

	.notice {
		margin-top: 10px;
		font-size: 28rpx;
		color: #738093;
		font-weight: 600;
	}

	.notice_desc {
		margin-top: 5px;
		font-size: 24rpx;
		color: #738093;
	}

	.list_item {
		padding: 5px 15px;
		margin-bottom: 10px;

		.item_time {
			font-size: 30rpx;
			color: #7b899c;
		}

		.item {
			align-items: center;
			justify-content: space-between;
			display: flex;

			.item_left {
				display: flex;
				align-items: center;

				.icon-chongzhi {
					font-size: 38rpx;
					padding: 10px;
					margin-right: 10px;
					border-radius: 50%;
					color: #2ec867;
					background-color: #dcfce7;
				}

				.icon-shipinxiazai {
					font-size: 38rpx;
					padding: 10px;
					margin-right: 10px;
					border-radius: 50%;
					color: #f26464;
					background-color: #fee2e2;
				}

				.record {
					font-size: 30rpx;
				}

				._time {
					font-size: 24rpx;
					color: #7b899c;
				}


			}

			.price_add,
			.price_subtract {
				color: #2ec867;
				font-size: 30rpx;
				font-weight: 600;
			}

			.price_subtract {
				color: #f26464;
			}
		}
	}
</style>